package com.jie.other.compose.study04

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.ArrowDropUp
import androidx.compose.material.icons.filled.Cake
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.ColorFilter
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.dp
import coil.compose.rememberAsyncImagePainter
import coil.request.ImageRequest
import com.jie.other.compose.data.ExploreModel
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

@Composable
fun Study04Page(
    viewModel: Study04ViewModel,
    itemClick : (ExploreModel) -> Unit = {},
) {
    Surface {
        var showLoading by remember {
            mutableStateOf(true)
        }
        if (showLoading) {
            LoadingScreen {
                showLoading = false
            }
        } else {
            HomeScreen(viewModel = viewModel, itemClick)
        }
    }
}

@Composable
fun HomeScreen(
    viewModel: Study04ViewModel,
    itemClick : (ExploreModel) -> Unit = {},
) {
    val scaffoldState = rememberScaffoldState()
    val scope = rememberCoroutineScope()
    Scaffold(
        scaffoldState = scaffoldState,
        drawerContent = {
            DrawerContent(
                closeClick = {
                    scope.launch {
                        scaffoldState.drawerState.close()
                    }
                }
            )
        }
    ) {
        Column(modifier = Modifier
            .fillMaxSize()
            .padding(it)) {
            Surface(modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)) {
                Button(onClick = {
                    scope.launch {
                        scaffoldState.drawerState.open()
                    }
                }) {
                    Text(text = "打开抽屉栏")
                }
            }
            PeopleUserInput(
                titleSuffix = "个游客",
                onPeopleChange = {
                    viewModel.updatePeople(it)
                },
                modifier = Modifier.padding(vertical = 8.dp)
            )
            ToDestinationUserInput(
                onToDestinationChange = { destination ->
                    viewModel.toDestinationChanged(destination)
                }
            )
            Box(modifier = Modifier.weight(1f)) {
                val listState = rememberLazyListState()
                val mSuggestListSate = viewModel.mSuggestList.collectAsState()
                LazyColumn(
                    modifier = Modifier.padding(vertical = 8.dp),
                    state = listState,
                ) {
                    items(mSuggestListSate.value) {
                        Row(
                            modifier = Modifier
                                .fillMaxWidth()
                                .padding(10.dp)
                                .clickable {
                                    itemClick.invoke(it)
                                }
                        ) {
                            val imagePainter = rememberAsyncImagePainter(
                                ImageRequest.Builder(LocalContext.current)
                                    .data(it.imageUrl).apply(
                                        block = fun ImageRequest.Builder.(){
                                            crossfade(true)
                                        }
                                    ).build()
                            )
                            Image(
                                painter = imagePainter,
                                contentDescription = it.city.name,
                                modifier = Modifier.size(60.dp),
                                contentScale = ContentScale.Crop,
                            )
                            Spacer(modifier = Modifier.width(8.dp))
                            Text(
                                text = it.city.nameToDisplay,
                                modifier = Modifier
                                    .padding(horizontal = 16.dp, vertical = 8.dp)
                                    .align(Alignment.CenterVertically)
                            )
                        }
                    }
                }
                val showButton by remember {
                    derivedStateOf {
                        listState.firstVisibleItemIndex > 0
                    }
                }
                if (showButton) {
                    FloatingActionButton(
                        onClick = {
                            scope.launch {
                                listState.scrollToItem(0)
                            }
                        },
                        backgroundColor = MaterialTheme.colors.primary,
                        modifier = Modifier
                            .align(Alignment.BottomEnd)
                            .navigationBarsPadding()
                            .padding(16.dp)
                    ) {
                        Text(text = "UP")
                    }
                }
            }
        }
    }
}

@Composable
fun DrawerContent(closeClick : () -> Unit, modifier: Modifier = Modifier) {
    Column(modifier.padding(horizontal = 16.dp),
        horizontalAlignment = Alignment.CenterHorizontally) {
        Image(imageVector = Icons.Default.Cake, contentDescription = null)
        Spacer(modifier = Modifier.height(8.dp))
        Text(text = "菜单1", modifier = Modifier.padding(vertical = 8.dp))
        Text(text = "菜单2", modifier = Modifier.padding(vertical = 8.dp))
        Text(text = "菜单3", modifier = Modifier.padding(vertical = 8.dp))
        Spacer(modifier = Modifier.height(8.dp))
        Button(onClick = closeClick) {
            Text(text = "close")
        }
    }
}

@Composable
fun LoadingScreen(
    modifier: Modifier = Modifier,
    onTimeOut : () -> Unit,
) {
    Box(
        modifier = modifier
            .fillMaxSize()
            .background(color = MaterialTheme.colors.primary),
        contentAlignment = Alignment.Center,
    ){
        val onTimeOutState by rememberUpdatedState(onTimeOut)
        LaunchedEffect(true) {
            delay(2000)
            onTimeOutState.invoke()
        }
        Image(
            imageVector = Icons.Default.Cake,
            contentDescription = null,
            colorFilter = ColorFilter.tint(Color.White)
        )
    }
}